<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="assets/include :: scriptcss('菜单管理')"/>
</head>
<body>
  <v-app id="app" v-cloak>
    <!-- 顶部功能区 -->
    <v-app-bar app flat :color="vdark? null : 'white'">
      <th:block th:replace="assets/include :: header"/>
    </v-app-bar>

    <!-- 左侧区域::导航菜单 -->
    <th:block th:replace="assets/include :: navMenu"/>

    <!-- 主体部分 -->
    <v-main>
      <!-- 主体容器 -->
      <v-container fluid>
        <v-card flat class="rounded-0 pa-6">
          <!-- 树数据表格 -->
          <v-row shiro:hasPermission="/system/menu/save">
            <v-col>
              <v-btn depressed color="primary" class="pr-5 pl-4" @click="openFormDialog($t('新增')+$t('菜单'))">
                <v-icon small>mdi-plus</v-icon>
                {{$t('新增')}}
              </v-btn>
            </v-col>
          </v-row>

          <v-row>
            <v-col>
              <v-progress-linear indeterminate rounded height="4" :active="loading"></v-progress-linear>
              <v-treeview ref="treeDatatable" transition hoverable activatable open-on-click item-key="menuId" :items="datatable.items" class="tree-datatable">
                <template v-slot:label="{ item, leaf }">
                  <v-row v-if="item.disabled">
                    <v-col v-for="header in item.headers" :style="'text-align:' + header.align">
                      {{$t(header.text)}}
                    </v-col>
                  </v-row>

                  <v-row v-if="!item.disabled">
                    <v-col>
                      <v-icon x-small v-if="item.icon" v-text="item.icon"></v-icon>{{item.menuName}}
                    </v-col>
                    <v-col class="text-center" :style="'margin-left:' + (item.level-1) * -24 + 'px;'">
                      {{item.orderNum}}
                    </v-col>
                    <v-col>
                      {{item.url}}
                    </v-col>
                    <v-col class="text-center">
                      {{item.createTime}}
                    </v-col>
                    <v-col style="text-align: center">
                      <a class="mr-2" @click.stop="openWinDrawer(item.menuId, item.menuName)" v-if="item.level > 1">{{$t('功能权限')}}</a>
                      <a class="mr-2" @click.stop="openFormDialog($t('修改')+$t('菜单'), item.menuId)" shiro:hasPermission="/system/menu/update">{{$t('修改')}}</a>
                      <v-btn-confirm :data="item" @confirm="doDelete" shiro:hasPermission="/system/menu/del"></v-btn-confirm>
                    </v-col>
                  </v-row>
                </template>
              </v-treeview>
            </v-col>
          </v-row>
          <v-row>
            <v-col class="text-center" v-text="$vuetify.lang.t('$vuetify.noDataText')" v-if="datatable.items.length < 2"/>
          </v-row>
        </v-card>

        <!-- 数据表单模态窗口 -->
        <v-dialog persistent v-model="winDialog" width="800">
          <validation-observer ref="observer" v-slot="{handleSubmit}">
            <v-form ref="dataForm" @submit.prevent="handleSubmit(doSubmit)">
              <v-card :loading="posting">
                <v-toolbar dark color="indigo" class="mb-4">
                  <v-toolbar-title>{{dialogTitle}}</v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-btn icon dark @click="closeFormDialog">
                    <v-icon>mdi-close</v-icon>
                  </v-btn>
                </v-toolbar>
                <v-card-text>
                  <!-- 数据表单 -->
                  <validation-provider v-slot="{ errors }" name="父菜单" rules="required|max:30">
                    <v-select outlined dense clearable :error-messages="errors" v-model="formData.parentId" :items="topMenus" item-value="menuId" item-text="menuName" :label="$t('父菜单')"></v-select>
                  </validation-provider>
                  <validation-provider v-slot="{ errors }" name="菜单名称" rules="required|max:30">
                    <v-text-field outlined dense clearable type="text" :error-messages="errors" v-model.trim="formData.menuName" :label="$t('菜单名称')"></v-text-field>
                  </validation-provider>
                  <validation-provider v-slot="{ errors }" name="图标" rules="letter_dash|max:30" v-show="!childFlag">
                    <v-text-field outlined dense clearable type="text" :error-messages="errors" v-model.trim="formData.icon" :label="$t('图标')"></v-text-field>
                  </validation-provider>
                  <validation-provider v-slot="{ errors }" name="URL" rules="max:100" v-show="childFlag">
                    <v-text-field outlined dense clearable type="text" :error-messages="errors" v-model.trim="formData.url" :label="$t('请求地址')"></v-text-field>
                  </validation-provider>
                  <v-select dense outlined v-model.trim="formData.target" :label="$t('打开方式')" v-show="childFlag" :items="[{value:'_self', text:'本窗口'},{value:'_blank', text:'新窗口'}]">
                  </v-select>
                  <validation-provider v-slot="{ errors }" name="排序" rules="required|integer|min_value:1|max_value:9999">
                    <v-text-field outlined dense clearable type="number" :error-messages="errors" v-model.trim="formData.orderNum" :label="$t('排序')"></v-text-field>
                  </validation-provider>
                  <validation-provider v-slot="{ errors }" name="备注" rules="max:200">
                    <v-textarea outlined dense clearable :error-messages="errors" v-blank v-model.trim="formData.remark" :label="$t('备注')"></v-textarea>
                  </validation-provider>
                </v-card-text>
                <v-card-actions class="justify-end">
                  <v-btn large color="primary" type="submit" :loading="posting">{{$t('保存')}}</v-btn>
                </v-card-actions>
              </v-card>
            </v-form>
          </validation-observer>
        </v-dialog>

        <!--全屏Loading提示-->
        <v-loading :value="overlay"></v-loading>
      </v-container>
    </v-main>

    <!--/* 导入功能权限管理代码片段 */-->
    <th:block th:replace="system/menu/menu-func :: func"/>
  </v-app>

  <!-- 导入Vuetify扩展组件 -->
  <th:block th:replace="assets/vuetify :: v-btn-confirm"/>
  <th:block th:replace="assets/vuetify :: v-loading"/>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/system/menu/menu.js?_t=#buildtime#}"></script>
  <script type="text/javascript">
    // 初始化Vue
    let app = new Vue({
      el: "#app",
      extends: baseApp,
      mixins: [menuMixin, funcMixin]
    });
  </script>
</body>
</html>
